//配置html-webpack-plugin  在module下面添加一个plugins的数组 new出这个对象  这个对象里有个参数 也是一个对象
var htmlWp = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: { //output 输出文件
        path: __dirname + '/dist', //这里必须是绝对路径  __dirname表示当前文件夹的绝对路径
        filename: "build.js" //输入文件的名字 输入到html中    在开启服务器的时候package.json里的服务器会指向这个文件 并且热加载 会自动注入build.js html里就不用写了
    },
    module: {
        loaders: [{
                test: /\.css$/, //所有的.css结尾的文件都被此loader处理
                loader: 'style-loader!css-loader' //从右边向左边调用 顺序不能错
            },
            {
                test: /\.scss$/, //所有的.scss结尾的文件都被此loader处理
                loader: 'style-loader!css-loader!sass-loader' //从右边向左边调用 顺序不能错
            },
            {
                test: /\.less$/, //所有的.less结尾的文件都被此loader处理
                loader: 'style-loader!css-loader!less-loader!' //从右边向左边调用 顺序不能错
            },
            {
                test: /\.(png|jpg|gif|ttf)$/, //打包url请求的资源
                loader: 'url-loader?limit=20000' //表示限制图片的大小为20K 小于20K的均被打包到build.js中去  
            },
            {
                test: /\.js$/, //将.js文件中的es6语法转成es5语法
                loader: 'babel-loader', //利用这个包去转换
                exclude: /node_modules/ //因为只需要转换我们自己写的代码  为了不影响其它的插件 我们需要排除其它的插件
            },
            {
                test: /\.vue$/, //解析.vue组件页面文件
                loader: 'vue-loader' //利用这个包去解析
            }
        ]
    },
    babel: { //添加一个节点
        presets: ['es2015'], //配置将es6语法转换成es5语法的一个指令
        plugins: ['transform-runtime'] //动态将vue文件进行编译的  不用vue的时候就不用写这个
    },
    plugins: [ //在module下面添加一个plugins的数组 
        new htmlWp({ //new出这个对象  这个对象里有个参数 也是一个对象
            title: "首页", //生成页面标题
            filename: 'index.html', //webpack-dev-server在内存中生成的文件的名称，自动将build注入到这个页面底部  因为这个是自动生成的名字 所以为了不冲突 将我们自己的改成index1
            template: 'index1.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)  ，为了不冲突  所以将我们自己的文件改成index1 
        })
    ]

}